<template>
  <section class="charts-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        柱状图1
        <p>Y轴label设置，截断、换行、富文本样式等</p>
      </div>
      <div class="text item">
        <div id="main"></div>
      </div>
    </el-card>
  </section>
</template>
<script>
export default {
  data () {
    return { }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts () {
      const chartDom = document.getElementById('main')
      const myChart = this.$echarts.init(chartDom)
      const option = {
        dataset: {
          source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 0, 'Walnut Brownie']
          ]
        },
        grid: { containLabel: true },
        xAxis: { name: 'amount' },
        yAxis: {
          type: 'category',
          axisLabel: {
            width: 60,
            overflow: 'breakAll', // truncate-截断 break breakAll
            align: 'right',
            formatter: function (value) {
              return `{a|${value}}`
            },
            rich: {
              a: {
                color: '#f00'
              }
            }
          }
        },
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 100,
          text: ['High Score', 'Low Score'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
          }
        },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            },
            barMinHeight: 3 // 柱状图最小高度
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
#main {
  width: 100%;
  height: 500px;
}
</style>
